/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */


$(function() {
    // there's the gallery and the trash
    var $gallery = $('#gallery'), $trash = $('#trash');

    // let the gallery items be draggable
    $('li',$gallery).draggable({
        cancel: 'a.ui-icon',// clicking an icon won't initiate dragging
        revert: 'invalid', // when not dropped, the item will revert back to its initial position
        containment: $('#demo-frame').length ? '#demo-frame' : 'document', // stick to demo-frame if present
        helper: 'clone',
        cursor: 'move'
    });

    // let the trash be droppable, accepting the gallery items
    $trash.droppable({
        accept: '#gallery > li',
        activeClass: 'ui-state-highlight',
        drop: function(ev, ui) {
            //alert("droppable");
            deleteImage(ui.draggable);
        }
    });

    // let the gallery be droppable as well, accepting items from the trash
    $gallery.droppable({
        accept: '#trash li',
        activeClass: 'custom-state-active',
        drop: function(ev, ui) {
            recycleImage(ui.draggable);

        }
    });

    // image deletion function  ///esta es la funcion que envia al trash.. osea al wishlist....
    var recycle_icon = '<a href="link/to/recycle/script/when/we/have/js/off" title="Restaurar" class="ui-icon ui-icon-refresh">Restaurar imagen</a>';
    function deleteImage($item) {
        $item.fadeOut(function() {//AQUI SE VE QUE LO ENVIA A UN UL
            var $list = $('ul',$trash).length ? $('ul',$trash) : $('<ul id="presentar" class="gallery ui-helper-reset"/>').appendTo($trash);
            /***/
            //var lista=document.getElementById("presentar");
            /***/

            $item.find('a.ui-icon-trash').remove();
            $item.append(recycle_icon).appendTo($list).fadeIn(function() {
                $item.animate({ width: '96px' }).find('img').animate({ height: '13%' }); //antes era width: '96px'
                
                //alert("anadio");
                /***/
                var lista=document.getElementById("presentar");
                var query="Controller?comando=guardarEnSession";
                //var cadena_id="";

                //var nodos=lista.childNodes;
                //alert(lista.firstChild.getAttribute("id"));
                //var nodos=lista.childNodes;
                //for(i=0; i<nodos.length; i++){
                    //alert(nodos.firstChild.getAttribute("id"));
                    //alert(nodos[i].getAttribute("id"));
                  //  cadena_id=cadena_id+"$"+nodos[i].getAttribute("id");
                //}
                //query=query+"&id="+cadena_id;
              guardarEnSession(query);
                //alert(id);
                /***/

            });
        });
    }

    /**************************ajax***************/

    function createXMLHttpRequest() {
    var xmlHttp;
    if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
    return xmlHttp;
}

function guardarEnSession(query)
{
    var Request;
    Request=createXMLHttpRequest();
    Request.open("GET",query,true);
    Request.onreadystatechange=function(){
            if(Request.readyState==4){
                if(Request.status==200){
                }else{
                    alert("Error en el requerimiento");
                }
            }
    }
    Request.send(null);
}

    /********************************************/

    // image recycle function
    var trash_icon = '<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>';
    function recycleImage($item) {
        $item.fadeOut(function() {
           
            $item.find('a.ui-icon-refresh').remove();
             $item.css('width','96px')/*.append(trash_icon)*/.find('img').css('height','15%').end().appendTo($gallery).fadeIn();
        });
    }

    // image preview function, demonstrating the ui.dialog used as a modal window
    function viewLargerImage($link) {
        var src = $link.attr('href');
        var title = $link.siblings('img').attr('alt');
        var $modal = $('img[src$="'+src+'"]');

        if ($modal.length) {
            $modal.dialog('open')
        } else {
            var img = $('<img alt="'+title+'" width="384" height="288" style="display:none;padding: 8px;" />')
                .attr('src',src).appendTo('body');
            setTimeout(function() {
                img.dialog({
                        title: title,
                        width: 400,
                        modal: true
                    });
            }, 1);
        }
    }

    // resolve the icons behavior with event delegation
    $('ul.gallery > li').click(function(ev) {
        var $item = $(this);
        var $target = $(ev.target);

        if ($target.is('a.ui-icon-trash')) {
            deleteImage($item);
        } else if ($target.is('a.ui-icon-zoomin')) {
            viewLargerImage($target);
        } else if ($target.is('a.ui-icon-refresh')) {
            recycleImage($item);
        }

        return false;
    });
});